<template>
    <div class="expense bb bt tc" @click="hideDelete">
        <div class="expense-upper clearfix">
            <div class="expense-item total-expense">
                <p class="expense-count"><span>{{cxjAmtTotal}}</span>元</p>
                <p class="expense-text">累计消费</p>
            </div>
            <div class="expense-item-line bl"></div>
            <div class="expense-item total-indent">
                <p class="expense-count"><span>{{cxjTimesTotal}}</span>笔</p>
                <p class="expense-text">累计订单</p>
            </div>
        </div>
        <div class="expense-line bb"></div>
        <div class="expense-lower clearfix">
            <div class="expense-item last-online">
                <p class="expense-count"><span>{{currentAppActiveDate.split('-')[0]}}</span>年<span>{{currentAppActiveDate.split('-')[1]}}</span>月<span>{{currentAppActiveDate.split('-')[2]}}</span>日</p>
                <p class="expense-text">APP最近活跃</p>
            </div>
            <div class="expense-item-line bl"></div>
            <div class="expense-item last-contact tc">
                <p class="expense-count"><span class="last">{{latestChatStore}}</span></p>
                <p class="expense-text">
                    最近一次店长直连 {{latestChatDate}}
                </p>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'clientDetailsExpense',
        props: {
            currentAppActiveDate: {
                type: String,
                default: ''
            },//
            cxjAmtTotal: Number,
            cxjTimesTotal: Number,
            latestChatDate: String,
            latestChatStore: String,
            hideDelete:Function
        },/*
        data: function () {
            return {
                totalExpense: {
                    title: '累计消费',
                    text: '12345元'
                },
                totalIndent: {
                    title: '累计订单',
                    text: '16笔'
                },
                lastOnline: {
                    title: 'APP最近活跃',
                    text: '16年2月1日'
                },
                lastContact:{
                    title: '最近一次店长直连 16年2月1日',
                    text: '上海华山路店'
                }
            }
        }*/
    }
</script>
<style lang="scss" scoped>
    @import "../../assets/css/common.scss";

    .expense{
        background-color: #fff;
        .expense-upper, .expense-lower{
             display: flex;
            >div{
                 float: left;
             }
         }
         .expense-item{
            flex: auto;
            height: rem(80);
            width: rem(186);
            .expense-text{
                color: #666;
                font-size: rem(12);
                margin-top: rem(8);
            }
            .expense-count{
                font-size: rem(12);
                margin-top: rem(20);
                line-height: rem(20);
                span{
                    font-size: rem(24);
                    font-weight: bold;
                }
                span.last{
                    font-size: rem(18);
                    margin-top: rem(1);
                    margin-bottom: rem(1);
                }
            }
        }
        .expense-line{
            height: 0;
            /*width: rem(351);*/
            margin: 0 rem(12);
        }
        .expense-item-line{
            width: 0;
            height: rem(60);
            margin-top: rem(10);
        }
    }
</style>
